<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini" v-hasPermi="['system:zf:add']"
          @click="handleAdd"
        >添加
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="迎检计划标题" :show-overflow-tooltip="true" prop="title" key="title" align="center"/>
      <el-table-column label="分类" :show-overflow-tooltip="true" prop="category" key="category" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.category === '1'">乡镇</span>
          <span v-if="scope.row.category === '2'">部门</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" :show-overflow-tooltip="true" prop="type" key="type" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type === '1'">法定行政执法事项</span>
          <span v-if="scope.row.type === '2'">赋权行政执法事项</span>
          <span v-if="scope.row.type === '3'">委托行政执法事项</span>
        </template>
      </el-table-column>
      <el-table-column label="排序号" align="center" prop="sort"/>
      <el-table-column label="制定时间" prop="createTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:zf:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:zf:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="1250px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="执法事项标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入执法事项标题"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="分类:" prop="category">
              <el-radio-group v-model="form.category">
                <el-radio label="1">乡镇</el-radio>
                <el-radio label="2">部门</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型:" prop="category">
              <el-radio-group v-model="form.type">
                <el-radio label="1">法定行政执法事项</el-radio>
                <el-radio label="2">赋权行政执法事项</el-radio>
                <el-radio label="3">委托行政执法事项</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="相关联系人:" prop="liaison">
              <el-input v-model="form.liaison" placeholder="请输入相关联系人"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="相关联系电话:" prop="liaisonTel">
              <el-input v-model="form.liaisonTel" placeholder="请输入相关联系电话"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="相关联系地址:" prop="liaisonAddress">
              <el-input v-model="form.liaisonAddress" placeholder="请输入相关联系地址"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序:" prop="sort">
              <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="事项内容:">
          <div class="more-info-box">
            <div class="more-info-box">
              <div>
                <el-table v-if="form.type === '1'" border :data="fdItemList" size="mini">
                  <el-table-column label="序号" width="50" type="index"></el-table-column>
                  <el-table-column prop="name" label="事项名称" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.name"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="事项类型" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model.trim="scope.row.type"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="main" label="执法主体" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.main"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="accordingTo" label="执法依据" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.accordingTo"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column width="70" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handleDeleteItem(scope.$index)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <el-table v-if="form.type === '2'" border :data="fqItemList" size="mini">
                  <el-table-column label="序号" width="50" type="index"></el-table-column>
                  <el-table-column prop="name" label="赋权事项名称" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.name"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="oldDept" label="原行驶部门" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        v-model.trim="scope.row.oldDept"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="range" label="赋权范围" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.range"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="accordingTo" label="赋权事项执法依据" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.accordingTo"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="fqAgency" label="赋权单位" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="2"
                        v-model.trim="scope.row.fqAgency"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column width="70" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handleDeleteItem(scope.$index)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-table v-if="form.type === '3'" border :data="wtItemList" size="mini">
                  <el-table-column label="序号" width="50" type="index"></el-table-column>
                  <el-table-column prop="name" label="委托事项名称" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.name"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="wtAgency" label="委托单位" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.wtAgency"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="acceptWtAgency" label="受委托方" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.acceptWtAgency"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="auth" label="委托权限" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.auth"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="zfAccordingTo" label="执法依据" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.zfAccordingTo"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="wtAccordingTo" label="委托依据" :show-overflow-tooltip="true" align="center">
                    <template slot-scope="scope">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model.trim="scope.row.wtAccordingTo"
                        placeholder="请输入"
                        clearable>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column width="70" label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="handleDeleteItem(scope.$index)"
                      >删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <el-button type="primary" style="float: right" size="mini" @click="handleAddItem">添加事项内容</el-button>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="open = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { pageList,add,edit,remove,getInfo } from "@/api/triones/zf";
export default {
  data() {
    return {
      loading: false,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataList:[],
      total: 0,
      title: "",
      open: false,
      form: {},
      rules: {
        title: [
          { required: true, message: "请输入执法事项标题", trigger: "blur" }
        ],
        category: [
          { required: true, message: "请选择分类", trigger: "blur" }
        ],
        type: [
          { required: true, message: "请选择分类", trigger: "blur" }
        ]
      },
      fdItemList: [],
      fqItemList: [],
      wtItemList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleAdd() {
      this.reset();
      this.title = "添加执法事项";
      this.open = true;
    },
    reset() {
      this.form = {
        id: undefined,
        title: undefined,
        category: '1',
        type: '1',
        content: undefined,
        sort: 0,
        liaison: undefined,
        liaisonTel: undefined,
        liaisonAddress: undefined
      }
      this.resetForm("form");
      this.fdItemList = [];
      this.fqItemList = [];
      this.wtItemList = [];
    },
    handleEdit(row) {
      this.reset();
      const id = row.id;
      getInfo(id).then(response => {
        this.form = response.data;
        if (response.data.type === '1') {
          if (response.data.content) {
            this.fdItemList = JSON.parse(response.data.content);
          }
        }
        if (response.data.type === '2') {
          if (response.data.content) {
            this.fqItemList = JSON.parse(response.data.content);
          }
        }
        if (response.data.type === '3') {
          if (response.data.content) {
            this.wtItemList = JSON.parse(response.data.content);
          }
        }
        this.title = '修改执法事项';
        this.open = true;
      })
    },
    handleAddItem() {
      var _this = this
      if (this.form.type === '1') {
        let list = {
          name: '',
          type: '',
          main: '',
          accordingTo: ''
        }
        _this.fdItemList.push(list)
      }
      if (this.form.type === '2') {
        let list = {
          name: '',
          oldDept: '',
          range: '',
          accordingTo: '',
          fqAgency: ''
        }
        _this.fqItemList.push(list)
      }
      if (this.form.type === '3') {
        let list = {
          name: '',
          wtAgency: '',
          acceptWtAgency: '',
          auth: '',
          zfAccordingTo: '',
          wtAccordingTo: ''
        }
        _this.wtItemList.push(list)
      }
    },
    handleDeleteItem(index) {
      var _this = this
      if (this.form.type === '1') {
        _this.fdItemList.splice(index, 1)
      }
      if (this.form.type === '2') {
        _this.fqItemList.splice(index, 1)
      }
      if (this.form.type === '3') {
        _this.wtItemList.splice(index, 1)
      }
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.open = true;
          if (this.form.type === '1') {
            this.form.content = JSON.stringify(this.fdItemList);
          }
          if (this.form.type === '2') {
            this.form.content = JSON.stringify(this.fqItemList);
          }
          if (this.form.type === '3') {
            this.form.content = JSON.stringify(this.wtItemList);
          }
          if (this.form.id != null) {
            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    }
  }
}
</script>
<style scoped lang="scss">
.more-info-box {
  padding-bottom: 20px;
}
</style>
